<template>

<el-container class="homepage">
  <el-header class="el-header">
    <div>
      <img src="../assets/logo.png" width="50px" height="50px" alt="">
      <span>后台管理系统</span>
    </div>
      <el-button @click="logout">退出</el-button>
  </el-header>
  <el-container>
    <el-aside width="200px">

      <!-- 左侧菜单 -->
      <el-menu router background-color="#333744" text-color="#ffff" default-active="2" class="el-menu-vertical-demo" >
        <!-- 一级 -->
      <el-submenu :index="m.path" v-for="m in menuList" :key="m.id">
        <template slot="title">
          <i class="el-icon-s-grid"></i>
          <span>{{m.authName}}</span>
        </template>
        <!-- 二级 -->
          <el-menu-item v-for="si in m.children" :key="si.id" :index="si.path" > <i class="el-icon-goods"></i>{{si.authName}}</el-menu-item>
      </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <!-- 路由占位符 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

</template>

<script>
export default {
data(){
  return{
    menuList:[]
  }
},
created(){
  this.getMenuList()
},
methods:{
  async getMenuList(){
  let ret=await this.$http.get('/menus')
  // console.log(ret);
  this.menuList=ret.data
  },
  logout(){
    localStorage.clear();
    this.$router.push('/login');
    this.$message({
          message: '退出成功',
          type: 'success'
        });
  }
}
}
</script>f

<style lang="less" scoped>
  .homepage{height: 100%; }
  .el-header{
    position: fixed; z-index: 1000;
    width: 100%;
    background: #373d41;
    display: flex;
    justify-content: space-between;
    color: #ffff;
    display: flex;
    align-items: center;
    span{
      margin-left: 15px;
    }
  }
  .el-aside{
    position: fixed; z-index: 1000;
    height: 100%;
    margin-top: 60px;
    background-color: #333744;
    .el-menu{
      border-right: none;
    }
  }
  .el-main{
    margin-top: 55px;
    margin-left: 200px;
    background-color: #eaedfe;
  }
</style>